<script>
import {Toast} from "vant-green";

export default {
  data() {
    return {
      form: {
      },
      show1:false,
      show2:false,
      show3:false,
      checked:0,
      medicationTime:'12:00',
      showSelectedTime: '请选择',
      showSelectedDay: '请选择',
      showSelectedUnits: '请选择',
      columns1: ['每天', '每隔1天', '每隔2天', '每隔3天', '每隔4天','每隔5天'],
      columns2: ['瓶', '包', '片']
    }
  },
  methods: {
    showPopup1() {
      this.show1 = true
    },
    showPopup2() {
      this.show2 = true
    },
    showPopup3() {
      this.show3 = true
    },
    handleConfirm(value) {
      // 当用户点击组件自带的“确定”按钮时触发，这里可以处理选择时间后的逻辑
      this.medicationTime = value;
      this.show1 = false;
      this.showSelectedTime = this.medicationTime;
    },
    handleCancel() {
      // 当用户点击组件自带的“取消”按钮时触发
      this.show1 = false;
    },
    onConfirm1(value, index) {
      this.show2 = false;
      this.showSelectedDay = value;
    },
    onCancel1() {
      this.show2 = false;
    },
    onConfirm2(value, index) {
      this.show3 = false;
      this.showSelectedUnits = value;
    },
    onCancel2() {
      this.show3 = false;
    },
    updateReminder(checked){
      checked?this.form.isEnabled=1:this.form.isEnabled=0;
    },
    addReminder() {
      if (
          !this.form.drugName ||
          this.showSelectedTime === "请选择" ||
          this.showSelectedDay === "请选择" ||
          this.showSelectedUnits === "请选择" ||
          !this.form.dosage
      ) {
        Toast("请填写所有必填项");
        return;
      }
      // 所有必填项都已填写，这里可以添加保存逻辑
      console.log("所有必填项已填写，可进行保存操作");
      console.log("药品名称:", this.form.drugName);
      console.log("用药时间:", this.showSelectedTime);
      console.log("提醒天数:", this.showSelectedDay);
      console.log("单位:", this.showSelectedUnits);
      console.log("计量:", this.form.dosage);
      console.log("启用:", this.checked);
      const reminder = {
        drugName: this.form.drugName,
        medicationTime: [this.showSelectedTime],
        reminderDays: this.showSelectedDay,
        unit: this.showSelectedUnits,
        dosage: this.form.dosage,
        isEnabled: this.checked?1:0
      };
      console.log(reminder);
      this.axios.post(`http://localhost:10086/api/doctor/drug_reminder/add`,reminder).then(res=>{
        if(res.data.code==200){
          Toast("添加成功");
          this.$router.push({name: 'remind'}).then(() => {
            window.location.reload();
          });
        }else{
          Toast(res.data.message);
        }
      })
    },
    goback(){
      this.$router.go(-1);
    }
  },
  created() {
    const token = JSON.parse(localStorage.getItem("token"));
    if (!token) {
      this.$message.error('请先登录');
      setTimeout(() => {
        this.$router.push({name: 'login'});
      }, 666);
    }
    // 设置全局默认请求头
    this.axios.defaults.headers.common['token'] = token;
  },
}

</script>

<template>
  <div>
    <div class="top">
      <van-icon @click="goback" name="arrow-left" />
      <span style="float:left;margin: auto">用药提醒</span>
    </div>
    <div class="conter">
      <van-field v-model="form.drugName" label="药品名称" placeholder="请填写" />
<!--      用药时间-->
      <van-cell is-link @click="showPopup1">用药时间
      <span style="margin-left: 40px">{{ showSelectedTime }}</span>
      </van-cell>
      <van-popup class="van-popup1" v-model="show1" position="bottom" :round="true">
        <div class="time-picker-container">
          <van-datetime-picker
              v-model="medicationTime"
              type="time"
              :min-hour="0"
              :max-hour="23"
              @confirm="handleConfirm"
              @cancel="handleCancel"
          />
        </div>
      </van-popup>
<!--      提醒天数-->
      <van-cell is-link @click="showPopup2">提醒天数
        <span style="margin-left: 40px">{{ showSelectedDay }}</span>
      </van-cell>
      <van-popup class="van-popup1" v-model="show2" position="bottom" :round="true">
        <div class="time-picker-container">
          <van-picker
              show-toolbar
              title="标题"
              :columns="columns1"
              @cancel="onCancel1"
              @confirm="onConfirm1"
          />
        </div>
      </van-popup>
<!--  单位-->
      <van-cell is-link @click="showPopup3">单位
        <span style="margin-left: 40px">{{ showSelectedUnits }}</span>
      </van-cell>
      <van-popup class="van-popup1" v-model="show3" position="bottom" :round="true">
        <div class="time-picker-container">
          <van-picker
              show-toolbar
              title="标题"
              :columns="columns2"
              @cancel="onCancel2"
              @confirm="onConfirm2"
          />
        </div>
      </van-popup>

      <van-field v-model="form.dosage" label="计量" placeholder="请填写" />

      <van-cell  >启用
        <van-switch class="switch" v-model="checked" @change="updateReminder(checked)" />
      </van-cell>

    </div>
    <van-button class="save-button" type="primary" size="mini" @click="addReminder">添加</van-button>

  </div>

</template>

<style scoped>
.top {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.van-popup1 {
  width: 100%;
}
.time-picker-container {
  background-color: white;
  padding: 10px;
}
.switch{
  float: right;
}
.save-button {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin-bottom: 20px;
  background-color: #007bff;
  border-radius: 10px;
  padding: 10px;
  width: 90%;
  height: 50px;
  margin-left: 5%;
  font-size: 20px;
}

</style>